@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
*
{
    margin: 0;          /* 将默认的上下左右外边距设为0 */
    padding: 0;          /* 将默认的上下左右内边距设为0 */
    font-family: 'Poppins', sans-serif;          /* 设置字体为梵文+拉丁语家族， 无衬线字体，无特殊修饰的字体*/
}

body
{
    background: #000 url(bg.jpg);          /* 将背景设置bg.jpg图片 颜色为黑色 */
    background-attachment: fixed;          /* css的背景图片的属性，背景图片不随元素滚动 */
    background-blend-mode: hard-light;          /* 背景图片是强光，最终的混合效果表现为图像亮的地方更亮，暗的地方更暗。 */
}

.container{
    position: absolute;          /* 绝对定位 脱离文档流的布局 起始位置为最近的父元素 有相对关系 相对于父容器 */
    top: 80px;          /* 距离顶部80px */
    left: 100px;          /* 距离左边100px */
    right: 100px;          /* 距离右边100px */
    bottom: 80px;          /* 距离底部80px */
    background: url(bg.jpg);          /* 背景采用bg.jpg */
    background-attachment: fixed;          /* css的背景图片的属性，背景图片不随元素滚动 */
    display: flex;          /* 弹性布局 */
    justify-content: center;          /* 弹性盒子容器主轴方向上居中对齐 */
    align-items: center;          /* flex布局中 交叉轴上居中对齐 */
    flex-direction: column;          /* flex-direction属性决定主轴的方向，column从上到下，row 默认值从左到右，row-reverse从右到左，column-reverse从下到上 */
    box-shadow: 0 50px 50px rgba(0,0,0,0.5),          /* 阴影，水平偏移量0，竖直偏移量50，阴影半径50 颜色黑色透明度0.5 */
                0 0 0 100px rgba(0,0,0,.1);           /* 阴影，水平偏移量0，竖直偏移量0，阴影半径100 颜色黑色透明度0.1 */
}

.container h2 {
    text-align: center;          /* 文本内容居中显示 */
    font-size: 10em;          /* 字体大小10rem */
    line-height: 0.7em;          /* 行高0.7em？？ */
    color: #333;          /* 字体颜色 */
    margin-top: -80px;          /* 上外边距-80px */
}

.container h2 span{
    display: block;          /* 设置为块状元素 */
    font-weight: 300;          /* 设置字体粗细 */
    letter-spacing: 6px;          /* 设置字母之间的距离6px */
    font-size: 0.2em;          /* 设置字体大小 */
}
.countdown{
    display: flex;          /* 弹性布局 */
    margin-top: 50px;          /* 上外边距50px */
}
.countdown div{
    position: relative;          /* 设置父层 子层就可以依据父层定位 否则子层就会逐层向上寻找 */
    width: 100px;          /* 盒子宽度100px */
    height: 100px;          /* 高度100px */
    line-height: 100px;          /* 行高100px */
    text-align: center;          /* 文本内容居中 */
    background: #333;          /* 设置背景色 */
    color: #fff;          /* 字体颜色白色 */
    margin: 0 15px;          /* 外边距上下0，左右15 */
    font-size: 3em;          /* 字体大小 */
    font-weight: 500;          /* 字体粗细 */
}
.countdown div:before{          /* 用伪类元素为黑框框增加下面现实的黄色框框 */
    content: '';          /* 插入留空的内容，空的伪元素可用于清除元素中的浮点数 */
    position: absolute;          /* 绝对定位 脱离文档流的布局 起始位置为最近的父元素 有相对关系 相对于父容器 */
    bottom: -30px;          /* 距离底部-30px，让黄色框框放在黑色格子的下部 */
    left: 0;          /* 距离左边0 */
    width: 100%;          /* 宽度为100% */
    height: 35px;          /* 盒子高度35px */
    background: #ff0;          /* 背景为黄色 */
    color: #333;          /* 字体颜色是黑色 */
    font-size: 0.35em;          /* 字体大小0.35 */
    line-height: 35px;          /* 行高35px */
    font-weight: 300;          /* 字体粗细300 */
}
.container #day:before{
    content: 'Days';          /* 伪类元素，插入Days */
}
.container #hour:before{
    content: 'Hours';          /* 伪类元素，插入Hours */
}
.container #minute:before{
    content: 'Minutes';          /* 伪类元素，插入Minutes */
}
.container #second:before{
    content: 'Seconds';          /* 伪类元素，插入Seconds */
}